<!-- <script setup>
import { useMouse } from './mouse.js'
const { x, y } = useMouse()
</script>
<template>Mouse position is at: {{ x }}, {{ y }}</template>
 -->
<template>
  <div>
    <div>Mouse position is at: {{ x }}, {{ y }}</div>
    <a-divider></a-divider>
    Mouse position is at: {{ ex }}, {{ ey }}
    <a-divider></a-divider>
    <div>
      <a-list size="large" bordered :data-source="data">
        <template #renderItem="{ item }">
          <a-list-item>{{ item.name }}</a-list-item>
        </template>
        <template #header>
          <div>Header</div>
        </template>
        <template #footer>
          <div>Footer</div>
        </template>
      </a-list>
    </div>
    <div>
      <a-button type="primary" @click="changeCount">增加</a-button>
      <div>{{ updateNum }}</div>
    </div>
  </div>
</template>

<script setup>
import { useMouse } from "./mouse";
import dataList from "./dataList";
import { eventUseMouse } from "./event";
import { watchEffect } from "@vue/runtime-core";
import { ref } from "vue";

const x = useMouse().x;
const y = useMouse().y;
const ex = eventUseMouse().x;
const ey = eventUseMouse().y;
const data = dataList.getDataList();
const count = ref(0);
const updateNum = ref(0);
function changeCount() {
  count.value++;
}
/**
 * 当 count 变化时自动触发
 * https://cn.vuejs.org/guide/essentials/watchers.html#watcheffect
 */
watchEffect(async () => {
  updateNum.value = count.value++;
});
</script>
